<template>
    <div style='width: 100%;height: 100%'>
      <div class='pic' style='height: 200px'>
        <van-swipe :autoplay="2000" >
          <van-swipe-item v-for="(item, index) in imglist" :key="index">
            <img  style='height:200px;width: 100%' :src="item.src" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class='intro'>
        <van-panel >
          <div class='title'>章丘区</div>
          <div class='content' style='margin: 0 10px'>
            <p>章丘区是山东省济南市的一个市辖区，位于济南市的东部，章丘区地势处于山区、丘陵、平原,南高北低，黄河流经北境。章丘区曾先后获得“全国双拥模范城”、“国家卫生城市”、“中国黑陶之乡”等荣誉称号。2017年12月，当选中国工业百强县区。</p>
          </div>
          <div style='width: 40%;margin:10px 30%' >
            <van-button size="small" style='width:100%;margin:10px auto'  @click='ReadMore'>查看更多</van-button>
          </div>
        </van-panel>
      </div>
      <div class='wenwu'>
        <div class='title' style='font-size: 16px;font-weight:bold'><b>文物古迹景点</b></div>
        <div class='wlist' style=' padding-left: 10px;'>
          <van-button  class='bq' plain type="primary" style='width: 95px' data-url='https://baike.baidu.com/item/%E5%9F%8E%E5%AD%90%E5%B4%96%E9%81%97%E5%9D%80' @click='toBD'>城子崖遗址</van-button>
          <van-button class='bq' plain type="primary" style='width: 95px'  @click='toBD' data-url="https://baike.baidu.com/item/%E6%B4%9B%E5%BA%84%E6%B1%89%E7%8E%8B%E9%99%B5">洛庄汉王陵</van-button>
          <van-button class='bq' plain type="primary" style='width: 116px'  @click='toBD' data-url="https://baike.baidu.com/item/%E8%B5%B5%E5%85%AB%E6%B4%9E%E7%9F%B3%E5%88%BB%E9%80%A0%E5%83%8F">赵八洞石刻造像</van-button>
          <van-button  class='bq' plain type="primary" style='width: 95px'  @click='toBD' data-url="https://baike.baidu.com/item/%E4%B8%9C%E5%B9%B3%E9%99%B5%E6%95%85%E5%9F%8E%E9%81%97%E5%9D%80/12093038?fromtitle=%E4%B8%9C%E5%B9%B3%E9%99%B5%E6%95%85%E5%9F%8E&fromid=4494850">东平陵故城</van-button>
          <van-button class='bq' plain type="primary" style='width: 128px'  @click='toBD' data-url="https://baike.baidu.com/item/%E6%B5%8E%E5%8D%97%E6%9C%B1%E5%AE%B6%E5%B3%AA%E6%99%AF%E5%8C%BA/19531106?fromtitle=%E6%9C%B1%E5%AE%B6%E5%B3%AA%E6%97%85%E6%B8%B8%E5%BA%A6%E5%81%87%E5%8C%BA&fromid=7896232">朱家峪旅游度假区</van-button>
        </div>
      </div>
      <div class='lvyou'>
        <div class='title' style='font-size: 16px;font-weight:bold'><b>旅游景点</b></div>
        <div class='wlist' style=' padding-left: 10px;'>
          <van-button  class='bq' plain type="primary" style='width: 70px'  @click='toBD' data-url="https://baike.baidu.com/item/%E7%99%BE%E8%84%89%E6%B3%89">百脉泉</van-button>
          <van-button class='bq' plain type="primary" style='width: 82px'  @click='toBD' data-url="">白泉古村</van-button>
          <van-button class='bq' plain type="primary" style='width: 154px'  @click='toBD' data-url="https://baike.baidu.com/item/%E8%8E%B2%E5%8D%8E%E5%B1%B1%E8%83%9C%E6%B0%B4%E7%A6%85%E5%AF%BA%E9%A3%8E%E6%99%AF%E5%8C%BA">莲华山胜水禅寺风景区</van-button>
          <van-button  class='bq' plain type="primary" style='width: 130px'  @click='toBD' data-url="https://baike.baidu.com/item/%E6%B5%8E%E5%8D%97%E9%87%8E%E7%94%9F%E5%8A%A8%E7%89%A9%E4%B8%96%E7%95%8C">	济南野生动物世界</van-button>
          <van-button class='bq' plain type="primary" style='width: 70px'  @click='toBD' data-url="https://baike.baidu.com/item/%E7%AB%A0%E4%B8%98%E7%99%BD%E4%BA%91%E6%B9%96/6311243?fr=aladdin">白云湖</van-button>
          <van-button class='bq' plain type="primary" style='width: 70px'  @click='toBD' data-url="https://baike.baidu.com/item/%E6%B5%8E%E5%8D%97%E6%9C%B1%E5%AE%B6%E5%B3%AA%E6%99%AF%E5%8C%BA/19531106?fromtitle=%E6%9C%B1%E5%AE%B6%E5%B3%AA&fromid=6615545">朱家裕</van-button>
          <van-button class='bq' plain type="primary" style='width: 70px'  @click='toBD' data-url="https://baike.baidu.com/item/%E9%94%A6%E5%B1%8F%E5%B1%B1/34769#viewPageContent">锦屏山</van-button>
          <van-button class='bq' plain type="primary" style='width: 114px'  @click='toBD' data-url="https://baike.baidu.com/item/%E5%AE%9D%E7%8F%A0%E5%B1%B1%E9%A3%8E%E6%99%AF%E5%8C%BA">宝珠山风景区</van-button>
          <van-button class='bq' plain type="primary" style='width: 60px'  @click='toBD' data-url="https://baike.baidu.com/item/%E5%A2%A8%E6%B3%89">墨泉</van-button>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: 'ZQIntro',
      data() {
        return {
          imglist:[
              { src: require('./image/ZQ1.jpg') },
              { src: require('./image/ZQ2.jpg') },
              { src: require('./image/ZQ3.jpg') }
          ]
        };
      },
      methods: {
        // 查看更多
        ReadMore() {
          window.location.href = 'https://baike.baidu.com/item/%E7%AB%A0%E4%B8%98%E5%8C%BA/7826572?fr=aladdin';
        },
        //----风景
        toBD(e){
          var _url=e.target.dataset.url
          window.location.href=_url
        }
      }
    }
</script>

<style scoped>
  .title{
    font-size: 20px;
    height: 24px;
    line-height: 24px;
    margin: 15px auto;
    padding-left: 10px;
  }
  .content{
    font-size: 13px;
  }
  p{
    width: 100%;
    line-height: 25px;
    white-space:pre-wrap;
    text-indent:2em;
  }
  .wenwu{
    margin-top: 30px;
  }
  .bq{
    height:35px;
    width:65px;
    border:1px solid #93C0FF;
    color: #3388FF;
    text-align: center;
    font-size: 12px;
    margin: 5px 0;
    line-height: 35px
  }
  .lvyou{
    margin-bottom: 50px;
  }
</style>
